<template>
  <div class="device-management">
    <div class="header">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="选择电站">
          <el-select v-model="searchForm.organization" placeholder="请选择" clearable class="search-input">
            <el-option v-for="item in organizationOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="searchForm.role" placeholder="请选择" clearable class="search-input">
            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="margin-left: auto;">新增设备</el-button>
    </div>

    <div class="cont">
      <el-table :data="userList" border style="width: 100%" stripe>
        <el-table-column prop="account" label="设备名称" />
        <el-table-column prop="name" label="设备类型" />
        <el-table-column prop="role" label="厂商/型号" />
        <el-table-column prop="organization" label="驱动" />
        <el-table-column prop="orgLevel" label="通信参数" />
        <el-table-column prop="phone" label="所属单元" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
      :total="pagination.total" @size-change="handleSizeChange" @current-change="handlePageChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Pagination from '@/components/Pagination.vue';
// 组织选项
const organizationOptions = ref([
  { value: '1', label: '陕西煤业集团' },
  { value: '2', label: '陕西分公司' },
  { value: '3', label: '西安分公司' }
]);

// 角色选项
const roleOptions = ref([
  { value: '1', label: '管理员' },
  { value: '2', label: '普通用户' },
  { value: '3', label: '操作员' }
]);

// 用户列表数据
const userList = ref([
  {
    account: 'admin001',
    name: '张三',
    role: '管理员',
    organization: '陕西煤业集团',
    orgLevel: '集团',
    phone: '13800138000'
  },
  {
    account: 'user002',
    name: '李四',
    role: '普通用户',
    organization: '陕西分公司',
    orgLevel: '省级',
    phone: '13900139000'
  }
]);
// 搜索表单
const searchForm = ref({
  organization: '',
  role: '',
  name: ''
});

// 分页配置
const pagination = ref({
  total: 50,
  pageSize: 10,
  currentPage: 1
});

// 搜索
const handleSearch = () => {
  console.log('搜索条件:', searchForm.value);
};

// 重置搜索表单
const resetForm = () => {
  searchForm.value.organization = '';
  searchForm.value.role = '';
  searchForm.value.name = '';
  console.log('重置搜索条件');
};
// 每页条数变化
const handleSizeChange = (size: number) => {
    pagination.value.pageSize = size;
    console.log('每页条数:', size);
};

// 页码变化
const handlePageChange = (page: number) => {
    pagination.value.currentPage = page;
    console.log('当前页:', page);
};
</script>

<style lang="scss" scoped>
.device-management {

  :deep(.el-form-item) {
    margin-bottom: 0;

    .el-form-item__label {
      line-height: 0.4rem;
    }
  }

  .header {
    display: flex;
    align-items: center;
    padding: 0.12rem 0.16rem;

    .search-input {
      width: 2rem;
    }
  }

  .cont {
    background: #fff;
    padding: 0 0.16rem 0.24rem;
    min-height: 75vh;
  }
}
</style>
